<template>
	<view class="addgoods">
		<view class="recharge_li">
			<view class="title">
				商品名称
			</view>
			<view class="inputbox">
				<input type="text" maxlength="20" placeholder="最多20字" v-model="name">
			</view>
		</view>
		<view class="recharge_li">
			<view class="title">
				商品原价
			</view>
			<view class="inputbox">
				<input type="number" v-model="market_price">
			</view>
		</view>
		<view class="recharge_li">
			<view class="title">
				商品售价
			</view>
			<view class="inputbox">
				<input type="number" v-model="price">
			</view>
		</view>
		<view class="recharge_li">
			<view class="title">
				商品分类
			</view>
			<view class="inputbox">
				<uni-data-select v-model="cateID" :localdata="cateList"></uni-data-select>
			</view>
		</view>
		<view class="recharge_li">
			<view class="title">
				商品简介
			</view>
			<view class="inputbox">
				<textarea name="content" id="content" maxlength="30" cols="30" v-model="introduction" rows="10"
					placeholder="最多30字"></textarea>
			</view>
		</view>
		<view class="recharge_li">
			<view class="title">
				商品单位
			</view>
			<view class="inputbox">
				<input type="text" v-model="unit" placeholder="件">
			</view>
		</view>
		<view class="recharge_li">
			<view class="title">
				库存
			</view>
			<view class="inputbox">
				<input type="text" v-model="stock" placeholder="请输入库存">
			</view>
		</view>
		<view class="recharge_li">
			<view class="title">
				商品LOGO(1张)：
			</view>
			<view class="uploadbox">
				<fjjImages :pageImgList="logoimg" @getlogo="getlogo" :type="upload_method[0]" :imgCount="1"
					:upload="upload"></fjjImages>
			</view>
		</view>
		<view class="recharge_li">
			<view class="title">
				商品轮播图(3张)：
			</view>
			<view class="uploadbox">
				<fjjImages :pageImgList="zimg" @getbanner="getbanner" :type="upload_method[1]" :imgCount="3"
					:upload="upload"></fjjImages>
			</view>
		</view>
		<view class="recharge_li switch">
			<view class="title">
				上/下架
			</view>
			<view class=" ">
				<switch :checked="status" @change="changeSwitch" />
			</view>
		</view>
		<view class="recharge_li switch">
			<view class="title">
				商品详情：
			</view>
		</view>
		<editor3 @recieve="recieve"></editor3>
		<view class="sumbit" @click="publish">
			提交
		</view>
	</view>
</template>

<script>
	import {
		getCategory,
		add
	} from "@/api/user.js"
	import fjjImages from '@/components/fjj-images/fjj-images.vue'
	import editor3 from '@/components/editor3/index.vue';

	export default {
		components: {
			fjjImages,
			editor3
		},
		data() {
			return {
				zimg: [],
				upload: 'goods',
				upload_method: ['getlogo', 'getbanner'],
				logo: '',
				name: '',
				unit: '',
				market_price: '',
				price: '',
				introduction: '',
				banner: [],
				intro: '',
				cateID: '',
				cateList: [],
				stock: '',
				logoimg: [],
				status: true
			}
		},
		onLoad() {
			this.getCategory()
		},
		methods: {
			changeSwitch(e) {
				this.status = e.detail.value
			},
			getCategory() {
				getCategory().then(res => {
					if (res.code == 0) {
						let cate = res.data
						cate.forEach(item => {
							this.cateList.push({
								text: item.name,
								value: item.id
							})
						})
					}
				})
			},
			getlogo(e) {
				this.logo = e[0]
			},
			getbanner(e) {
				console.log(e);
				this.banner = e
			},
			recieve(e) {
				this.intro = e.html
			},
			publish() {
				if (this.name == '') {
					return uni.$showMsg('请输入商品名')
				}
				if (this.price == '') {
					return uni.$showMsg('请输入商品单价')
				}
				if (this.logo == '') {
					return uni.$showMsg('请上传logo')
				}
				if (this.banner.length == 0) {
					return uni.$showMsg('请上传轮播图')
				}
				if (this.intro == '') {
					return uni.$showMsg('请填写商品详情')
				}
				uni.showLoading({
					mask: true

				})
				add({
					name: this.name,
					price: this.price,
					category_id: this.cateID,
					market_price: this.market_price,
					unit: this.unit,
					sketch: this.introduction,
					intro: this.intro,
					stock: this.stock,
					cover: this.logo,
					images: this.banner,
					status: Number(this.status)
				}).then(res => {
					uni.$showMsg(res.msg)
					if (res.code == 0) {
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f7f7f7;
		padding-bottom: 1px;
	}

	.sumbit {
		width: 80%;
		margin: 30px auto;
		border-radius: 10px;
		height: 45px;
		line-height: 45px;
		font-size: 16px;
		letter-spacing: 1px;
		text-align: center;
		background-color: $uni-bg-color;
		color: #fff;
		border: 1px solid #ccc;
	}

	.addgoods {

		.recharge_li {
			display: flex;
			flex-direction: column;
			color: #000;

			&.switch {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				padding: 10px 0;
				background: #fff;

				switch {
					transform: scale(.7);
				}
			}

			.title {
				font-size: 15px;
				padding: 10px 3%;
				font-weight: bold;
			}

			.imgbox {
				width: 50%;
				margin-top: 5px;
				padding-left: 5%;

				image {
					width: 100%;
				}
			}

			.inputbox {
				background-color: #fff;
				border: 1px solid #ccc;
				margin: 0 auto;
				margin-top: 5px;
				box-sizing: border-box;
				width: 94%;
				border-radius: 5px;

				textarea {
					padding: 10px;
					font-size: 14px;
				}

				input {
					height: 35px;
					line-height: 35px;
					padding: 0 10px;
					font-size: 14px;
				}
			}

			.uploadbox {
				background-color: transparent;
			}
		}
	}
</style>